<template>
  <div class="order-card">
    <div class="top">
      <span>{{ order.hotelName }}</span>
      <span class="status">{{ order.orderStatus }}</span>
    </div>
    <div class="middle">
      <div class="dates">
        入住：{{ formatDate(order.checkInDate) }} - 退房：{{ formatDate(order.checkOutDate) }}
      </div>
      <div class="room-info">房间号：{{ order.roomNumber || '待分配' }}</div>
    </div>
    <div class="bottom">
      <div class="left">
        <button
          v-if="order.orderStatus !== '已退款'"
          class="refund-button"
          @click="cancelHotelOrder"
        >
          退订
        </button>
        <span class="time">支付时间：{{ formatDateTime(order.paymentTime) }}</span>
      </div>
      <div class="price">￥{{ formatAmount(order.paymentAmount) }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import type { HotelOrder } from '@/types/hotel'
import api from '@/utils/api'

const props = defineProps<{ order: HotelOrder }>()
const emit = defineEmits(['cancelSuccess'])

const cancelHotelOrder = async () => {
  if (!confirm('确定要取消该订单并退款吗？')) return
  try {
    await api.post('/api/hotels/cancel', null, {
      params: { orderId: props.order.orderId },
    })

    // 创建退订消息通知
    const messageData = {
      userName: localStorage.getItem('username') || '',
      messageType: 2, // 酒店消息类型
      actionType: '酒店退订成功',
      content: `您已成功退订 ${props.order.hotelName} 酒店，入住日期：${formatDate(props.order.checkInDate)}，退房日期：${formatDate(props.order.checkOutDate)}。退款金额：￥${formatAmount(props.order.paymentAmount)} 已退回您的账户，风行旅途祝您生活愉快！`,
    }

    await api.post('/api/message/set', messageData)

    alert('退订成功')
    emit('cancelSuccess', props.order.orderId)
  } catch (e: any) {
    console.error('退订失败', e)
    if (e.response && e.response.data) {
      alert('退订失败: ' + (e.response.data.message || e.response.data))
    } else {
      alert('退订失败，请稍后重试')
    }
  }
}

const formatDate = (str: string) => str.slice(0, 10)
const formatDateTime = (str: string) => str?.replace('T', ' ').slice(0, 16) || '—'
const formatAmount = (val: number | string) =>
  typeof val === 'string' ? parseFloat(val).toFixed(2) : val.toFixed(2)
</script>

<style scoped>
.order-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.top {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
}
.middle .dates,
.middle .room-info {
  font-size: 14px;
  color: #444;
  margin: 4px 0;
}
.status {
  color: #409eff;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #555;
}
.bottom .price {
  font-size: 18px;
  color: #e53935;
  font-weight: bold;
}
.refund-button {
  background-color: #f56c6c;
  color: white;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 4px;
}
.refund-button:hover {
  background-color: #dd6161;
}
.time {
  font-size: 13px;
  color: #888;
}
</style>
